iT邦幫忙

2022 iThome 鐵人賽

DAY 11
0

假設今天要打印出1~2的數字非常簡單,但若需要執行上百次執行幾乎相同動作打印到10000時,就可以用到迴圈的程式,或是手動打印10000次哈哈哈


本篇會介紹:

  • while
  • for
  • 嵌套迴圈
  • break與continue離開迴圈
  • for與while的差別

while

循環有很多種呈現方式但任何循環都具備三個條件:

  1. 起始值:設定循環開始的值
  2. 停止值:測試循環是否該繼續的邏輯條件
  3. 如何到達下一個項目:遞增或遞減的步驟
let i = 1; // 設定起始值
while(i<=10){ // 設定判斷何時停止 i<=10 為false時
	console.log(i); 
	i+=2 // 如何到下一個步驟:遞增2
} 
/*
1
3
5
7
9
11
*/

以下兩點為設定迴圈時須注意的事項,

  • 在設定迴圈時三個條件缺一不可,若缺少將會造成瀏覽器崩潰
  • 不管如何執行條件都會判讀會true時,會進行一個無限迴圈,離不開迴圈。

for

for迴圈是JavaScript中最常見的迴圈類型,與while不同的是必須明確的定義,而for loop的使用方式如下:

for ( 起始值; 停止值; 到達下一個項目 ) {
  // 若判斷為true則值型{ }內的動作
}
for (let i = 0; i < 6; i++) { 
  console.log(i);
}
/*
0
1
2
3
4
5
*/

同while執行,若條件為true時將會執行動作,直到條件判斷為false時,跳出迴圈區塊。

嵌套迴圈

當迴圈變複雜時可能會有下面這種情況

for (let x = 0; x < 3; x++) {
  for (let y = 0; y < 2; y++) {
    console.log(x + "," + y);
  }
}
/*
0,0
0,1
1,0
1,1
2,0
2,1
*/

用表格的方式較容易理解,可以發現即便內容的迴圈判斷結束,仍然會跳回外圍的迴圈,直到外圍迴圈判斷為false。

x x<3 y y<2 console.log
0 true 0 true 0,0
0 true 1 true 0,1
0 true 2 false /
1 true 0 true 1,0
1 true 1 true 1,1
1 true 2 false /
2 true 0 true 1,0
2 true 1 true 2,1
2 true 2 false /

break與continue離開迴圈

  • break:直接離開迴圈
  • continue:跳過一次並繼續迴圈

透過上述的內容可以在迴圈中加入條件if讓迴圈離開

let arr=[0,0,0,5,3,4,0];
for(let i=0 ; i<arr.length ; i++){
    if(arr[i] !== 0){
        console.log(arr[i]);
        break;
    }
}

for與while的差別

  • for 明確的迴圈執行次數
  • while “不”明確的迴圈執行次數 ex:大樂透

若有問題或補充都歡迎回復唷~


上一篇
【Day10】流程敘述-switch、三元(條件)運算
下一篇
【Day12】函數function
系列文
喜歡打程式嗎?從JavaScript基礎來進行興趣初探!30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

0
小哈片刻
iT邦研究生 4 級 ‧ 2022-09-15 09:32:20

不管如何執行條件都會判讀會true時,會進行一個無限迴圈,開不開迴圈。

這行看了很難過,麻煩改一下~謝謝喔!

Yumy iT邦新手 4 級 ‧ 2022-09-15 14:05:40 檢舉

哈哈哈最近都打到神智不清了XDD 謝謝糾正!!

我要留言

立即登入留言